<template>
  
      <div class="LocationTemplate">
        <div class="box">
          <ul>
            <li class="li-center">库位标识卡</li>
            <li class="li-center">色彩女王</li>
            <li><span class="title">库位代号: </span><span class="value">4LBHJ22-1-1</span></li>
            <li><span class="title">库位名称: </span><span class="value">4LBHJ22-1-1</span></li>
            <li><span class="title">所属仓库: </span><span class="value">QWCKO17</span></li>
            <li><span class="title">仓库名称: </span><span class="value">女王半成品仓</span></li>
            <li><span class="title"> 描述: </span><span class="value"></span></li>
            <li>
              <div class="imgBox"><img src="https://img.xjishu.com/img/zl/2018/6/30/1241359458913.gif" /></div>
            </li>
          </ul>
        </div>
      </div>
</template>

<script>
export default {

}
</script>

<style  scoped>

.LocationTemplate {
  border: 1px solid green;
  width: 500px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  padding: 20px 30px;
  box-sizing: border-box;
  width: calc(90% / 6 * 4);
  height: 90%;
  border: 2px solid #000;
}
.box ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.box ul li:last-child {
  width: 100%;
  height: 45%;
  /* border: 1px solid #000; */
  /* background-color: antiquewhite; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.box ul li {
  font-weight: 600;
  /* border: 1px solid green; */
}
.li-center {
  font-size: larger;
  text-align: center;
}

.imgBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width:60% ;
  height: 80%;
  border: 1px solid #000;
}



img {
  display: inline-block;
  width: 90%;
}
</style>